<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="800px"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :append-to-body="true"
    :destroy-on-close="true"
    :before-close="handleClose"
  >
    <el-form ref="appEdit" :model="app" :rules="rules" label-width="120px">
      <el-form-item v-if="linkType == 0" label="选择应用" prop="AppId">
        <el-cascader
          v-model="app.AppId"
          style="width: 100%;"
          placeholder="选择应用"
          :options="powerList"
          filterable
          clearable
          :props="{emitPath: false}"
          @change="appChange"
        />
      </el-form-item>
      <el-form-item label="名称" prop="Name">
        <el-input v-model="app.Name" :maxlength="50" placeholder="说明" />
      </el-form-item>
      <el-form-item label="图标" prop="Icon">
        <iconChiose v-model="app.Icon" />
      </el-form-item>
      <el-form-item v-if="linkType == 1" label="链接地址" prop="Link">
        <el-input v-model="app.Link" :maxlength="255" placeholder="链接地址" />
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align: center">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
import iconChiose from '@/components/tools/iconChiose.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    iconChiose
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: 0
    },
    linkType: {
      type: Number,
      default: 0
    },
    source: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      powerList: [],
      powerCache: {},
      app: {
        AppId: null,
        Name: null,
        Icon: null,
        Link: null
      },
      title: null,
      rules: {
        Name: [
          {
            required: true,
            message: '名称不能为空！',
            trigger: 'blur'
          }
        ],
        AppId: [
          {
            required: true,
            message: '请选择应用！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['subSystem', 'power'])
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() { },
  methods: {
    reset() {
      if (this.source == null) {
        this.title = '新增' + (this.linkType === 0 ? '应用' : '外部链接')
        this.app = {
          AppId: null,
          Name: null,
          Icon: null,
          Link: null
        }
      } else {
        this.title = '编辑' + (this.linkType === 0 ? '应用' : '外部链接')
        this.app = {
          AppId: this.source.AppId,
          Name: this.source.Name,
          Icon: this.source.Icon,
          Link: this.source.Link
        }
      }
      if (this.linkType === 0) {
        this.initPower()
      }
    },
    appChange(id) {
      if (id == null) {
        this.app.Name = null
        this.app.Icon = null
        return
      }
      const item = this.powerCache[id]
      this.app.Name = item.label
      this.app.Icon = item.icon
    },
    handleClose() {
      this.$emit('update:visible', false)
    },
    initPower() {
      const list = []
      this.subSystem.forEach(a => {
        const t = {
          label: a.Name,
          icon: a.Icon,
          type: 2,
          value: a.Id
        }
        t.children = this.power[a.Id].map(a => this.format(a))
        list.push(t)
      })
      this.powerList = list
    },
    format(item) {
      const t = {
        label: item.Name,
        icon: item.Icon,
        type: item.PowerType,
        value: item.Id
      }
      if (t.type === 1) {
        t.children = item.Children.map(a => this.format(a))
      } else {
        t.route = item.RouteName
        t.param = item.PageParam
        this.powerCache[t.value] = t
      }
      return t
    },
    save() {
      const that = this
      this.$refs['appEdit'].validate((valid) => {
        if (valid) {
          const data = Object.assign({}, that.app)
          data.LinkType = that.linkType
          this.$emit('update:visible', false)
          this.$emit('save', this.index, data)
        }
      })
    }
  }
}
</script>
